<template>
  <li>
    <h3>姓名是---{{name}}</h3>
    爱好是---<span v-for="item in hobby" :key="item">{{item}}</span>
  </li>
</template>

<script>
export default {
  name: 'Item',
  // props的第一种写法：数组写法
  // props: ['name', 'hobby'],

  // props的第二种写法：对对象限制类型写法
  // props: {
  //   naem: String,
  //   hobby: Array,
  //   count: Number
  // },

  // props的第二种写法：对类型等各种限制的写法
  props: {
    name: {
      type: String,
      // 必填项
      required: true,
      // 默认值
      default: '张三'
    },
    hobby: Array,
    // 我们可以做自定义规则限制
    count: {
      // validator是用来给某个props做自定义限制规则的，参数value就是props接收的值 如果函数返回true 则通过校验 否则不通过
      validator(value) {
        const arr = [1, 3, 5, 7]
        return arr.includes(value)
      }
    }
  }
}
</script>

<style>
</style>